<template>
  <div class="channelWrap channelTable cf">
    <div class="leftBox">
      <div class="title">
        <h2>最新更新</h2>
      </div>
      <div class="updateTable">
        <table cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th class="style">类别</th>
              <th class="name">书名</th>
              <th class="chapter">最新章节</th>
              <th class="author">作者</th>
              <th class="time">更新时间</th>
            </tr>
          </thead>
          <tbody id="newRankBooks2">
            <tr v-for="(item, index) in state.booksList" :key="index">
              <td class="style">
                <a href="javascript:void(0)" @click="bookDetail(item.id)"
                  >[{{ item.catName }}]</a
                >
              </td>
              <td class="name">
                <a href="javascript:void(0)" @click="bookDetail(item.id)">{{
                  item.bookName
                }}</a>
              </td>
              <td class="chapter">
                <a href="javascript:void(0)" @click="bookDetail(item.id)">{{
                  item.lastIndexName
                }}</a>
                <i class=""></i>
              </td>
              <td class="author">
                <a href="javascript:void(0)">{{ item.authorName }}</a>
              </td>
              <td class="time">
                {{ parseTime(item.lastIndexUpdateTime, '{m}-{d} {h}:{i}') }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id="bookrank5_ShowBookRank">
      <div class="rightBox mb20">
        <div class="title cf">
          <h3 class="on">更新榜单</h3>
        </div>
        <div class="rightList">
          <ul id="updateRankBooks">
            <li
              v-for="(item, index) in state.booksRank"
              :key="index"
              :class="['num' + (Number(`${index}`) + 1), { on: index == 0 }]"
            >
              <div class="book_name">
                <i>{{ index + 1 }}</i
                ><a
                  class="name"
                  href="javascript:void(0)"
                  @click="bookDetail(item.id)"
                  >{{ item.bookName }}</a
                >
              </div>
              <div class="book_intro">
                <div class="cover">
                  <a href="javascript:void(0)" @click="bookDetail(item.id)"
                    ><img
                      :src="item.picUrl"
                      :alt="item.bookName"
                      onerror="this.src='default.gif';this.onerror=null"
                  /></a>
                </div>
                <a
                  class="txt"
                  href="javascript:void(0)"
                  @click="bookDetail(item.id)"
                  v-html="item.bookDesc"
                ></a>
              </div>
            </li>
          </ul>
          <div class="more">查看更多&gt;</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { updateRankList } from '@/api/home'
import { parseTime } from '@/utils'
import { useRouter } from 'vue-router'
const router = useRouter()

const state = reactive({
  booksRank: [],
  booksList: [],
})

onMounted(async () => {
  const { data } = await updateRankList()
  state.booksList = data.data
  await data.data.forEach((book) => {
    if (state.booksRank.length < 10) {
      state.booksRank[state.booksRank.length] = book
    }
  })
  
})

const bookDetail = (bookId) => {
  console.log(bookId)
  router.push({ path: `/book/${bookId}` })
}

// const state = reactive({
//   booksRank: [
//     {
//       picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1735921/180",
//       bookName: "遮天",
//       bookDesc:"冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。这是太空探测器在枯寂的宇宙中捕捉到的一幅极其震撼的画面。九龙拉棺，究竟是回到了上古，还是来到了星空的彼岸？一个浩大的仙侠世界，光怪陆离，神秘无尽。热血似火山沸腾，激情若瀚海汹涌，欲望如深渊无止境……登天路，踏歌行，弹指遮天。"
//     },
//     {
//       picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1033448521/180",
//       bookName: "重铸2005",
//       bookDesc:"大龄单身狗苇庆凡在第N次被催婚后回到高中时代，获得了一次重新筑基的机会。"
//     },
//     {
//       picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1033982482/180",
//       bookName: "你老爹我才不是什么莽夫",
//       bookDesc:"xxxxxx"
//     },
//     {
//       picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1034342761/180",
//       bookName: "从逆练辟邪开始",
//       bookDesc:"xxxxxx"
//     },
//     {
//       picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1022576776/180",
//       bookName: "叩问仙道",
//       bookDesc:"xxxxxx"
//     }
//   ],
//   booksList: [
//     {
//       categoryName: "玄幻奇幻",
//       bookName: "	我每天都能获得一种天赋",
//       lastChapterName: "小小的说两句",
//       authorName: "封山十月",
//       lastChapterUpdateTime: "02/05 20:11"

//     }
//   ],
// });

// onMounted(async () => {

// });
</script>
